<template>
    <div class="login-body">
        <div class="login-container">
            <div class="head">
                <div class="name">
                    <div class="title">欢迎订餐</div>
                </div>
            </div>
            <el-form label-position="top" :rules="state.rules" :model="state.dataForm" ref="loginForm"
                     class="login-form">
                <el-form-item prop="username">
                    <template #label>
                        <span style="font-size: 16px;color: orange">账号</span>
                    </template>
                    <el-input type="text" placeholder="请输入您的手机号" v-model.trim="state.dataForm.username" autocomplete="off" class="inputcss"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <template #label>
                        <span style="font-size: 16px;color: orange">密码</span>
                    </template>
                    <el-input type="password" placeholder="请设置密码" v-model.trim="state.dataForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <template #label>
                        <span style="font-size: 16px;color: orange">验证码</span>
                    </template>
                    <el-input type="text" placeholder="请输入验证码" v-model.trim="state.dataForm.code" autocomplete="off"></el-input>
                </el-form-item>
                <br>
                <div class="code-container" style="height: 50px; width: 120px">
                    <img :src="store.getters.getCode" alt="看不清？点我更换" @click="funcCode"/>
                </div>
                <el-form-item>

                    <div style="color: black">登录表示您已同意<a style="color: #FFDAB9">《服务条款》</a></div>
                    <el-button style="width: 100%" type="primary" @click="submitForm">立即注册</el-button>
                    <div>
                        <a href="login"><span style="color: orangered">已注册？点击登录</span></a>
                    </div>
                    <!--                    <el-checkbox v-model="state.checked" @change="!state.checked">下次自动登录</el-checkbox>-->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
    import {onMounted, reactive, ref} from 'vue'
    import {getCode, add} from '@/api/user'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import {ElLoading} from "element-plus";

    const loginForm = ref(null)
    const store = useStore()
    const router = useRouter()

    // 获取验证码
    const funcCode = () => {
        getCode().then((res) => {
            console.log(res);
            store.commit("saveCode", res.data);
        });
    }


    onMounted(() => {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
            loading.close()
        }, 1000);
        funcCode();
    });

    const state = reactive({
        dataForm: {
            username: '',
            password: '',
            code: '',
        },
        user:{
            id:100,
            username: '',
            sex: 'MALE',
            name: '',
            email: '',
            phone: '',
            image: ''
        },
        rules: {
            username: [
                {required: 'true', message: '账户不能为空', trigger: 'blur'}
            ],
            password: [
                {required: 'true', message: '密码不能为空', trigger: 'blur'}
            ],
            code: [
                {required: 'true', message: '验证码不能为空', trigger: 'blur'}
            ]
        }
    });
    const submitForm = () => {
        // 显示正在加载
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
            loading.close()
        }, 2000);
        loginForm.value.validate((valid) => {
            loading.close();
            if (valid) {
                console.log("1111")
                state.user.username=state.dataForm.username
                state.user.password=state.dataForm.password
                add(state.user).then((res) => {
                    console.log("1111")
                    console.log(res)
                    //保存用户名和id
                    store.commit('saveUser', res.data)
                    //跳转首页introduce
                    router.push({path: "/login"})
                })
            } else {
                loading.close();
                loading.lock = false;
                return false;
            }
        })
    }
    const resetForm = () => {
        loginForm.value.resetFields();
    }
</script>

<style scoped>
    .login-body {
        height:720px;
        font-family: JetBrains Mono Medium;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #0e92b3; */
        background: url('../views/slider-pic/bizhi.png');
        background-size: 100% 100%;
    }

    .login-container {
        width: 400px;
        background-color: rgba(41, 45, 62, 0.2);
        color: #fff;
        border-radius: 2px;
        padding: 50px;
    }

    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0 20px 0;
    }

    .head img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    .head .title {
        font-size: 28px;
        color: orange;
        font-weight: bold;
    }

    .head .tips {
        font-size: 12px;
        color: #999;
    }

    .login-form {
        width: 70%;
        margin: 0 auto;
    }

    .login-form >>> .el-form--label-top .el-form-item__label {
        padding: 0;
    }

    .login-form >>> .el-form-item {
        margin-bottom: 0;
    }
</style>
